<template>
    <div class="page-container" style="padding-top:80px;">
        <div class="page-wrapper" style="position:fixed; z-index:10; top:80px; height:80px; background:#fff; box-shadow: 0px 2px 8px 2px rgb(57, 58, 63, 0.15);">
            <div class="page-content">
                <div class="sub-menu">
                    <div>关于我们</div>
                    <div :class="{ selected:$route.name === 'intro' }" @click="$router.push('/about')">企业简介</div>
                    <div :class="{ selected:$route.name === 'news' || $route.name === 'news-detail' }" @click="$router.push('/about/news')">动态</div>
                </div>
            </div>
        </div>
        <RouterView></RouterView>
        
    </div>
</template>
<script setup>
    import { watch, ref } from 'vue';
    import { useRoute } from 'vue-router';
    import { Right } from '@element-plus/icons-vue';
    const menuKey = ref('energy');
    const appKey = ref('');
    const viewIndex = ref('view');

</script>
<style scoped>
    .sub-menu {
        height:100%;
        font-size:14px;
        line-height:28px;
        display:flex;
        align-items: center;
    }
    .sub-menu > div {
        color:#525866;
        margin-right:24px;
    }
    .sub-menu > div:nth-child(1) {
        padding-right:24px;
        border-right:1px solid #d9d9d9;
    }
    .sub-menu > div.selected {
        color:#335CFF;
        font-weight:bold;
    }
</style>